﻿<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="/lib/html5shiv.js"></script>
<script type="text/javascript" src="/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>我的桌面</title>
</head>
<body>
<div class="page-container">
	<p class="f-20 text-success">欢迎使用高新区公共车辆租赁平台 <span class="f-14">v1.0</span></p>
	<p>上次登录IP：[[${user.lLoginIp}]]  上次登录时间：[[${user.login_time}]]</p>
	<table class="table table-border table-bordered table-bg">
		<thead>
			<tr>
				<th colspan="7" scope="col">信息统计</th>
			</tr>
			<tr class="text-c">
				<th>统计</th>
				<th>活跃车辆总数</th>
				<th>行驶总里程</th>
				<th>车辆租用订单</th>
			</tr>
		</thead>
		<tbody>
			<tr class="text-c">
				<td>今日</td>
				<td>0</td>
				<td>0</td>
				<td>0</td>
			</tr>
			<tr class="text-c">
				<td>昨日</td>
				<td>0</td>
				<td>0</td>
				<td>0</td>
			</tr>
			<tr class="text-c">
				<td>本周</td>
				<td>2</td>
				<td>0</td>
				<td>0</td>
			</tr>
			<tr class="text-c">
				<td>本月</td>
				<td>2</td>
				<td>0</td>
				<td>0</td>
			</tr>
			<tr class="text-c">
				<td>本季度</td>
				<td>2</td>
				<td>0</td>
				<td>0</td>
			</tr>
			<tr class="text-c">
				<td>本年</td>
				<td>2</td>
				<td>0</td>
				<td>0</td>
			</tr>
			<tr class="text-c">
				<td>合计</td>
				<td>92</td>
				<td>9</td>
				<td>0</td>
			</tr>
		</tbody>
	</table>
	<table class="table table-border table-bordered table-bg mt-20">
		<thead>
			<tr>
				<th colspan="2" scope="col">图表统计</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th colspan="2">活跃车辆</th>
			</tr>
			<tr>
				<td colspan="2">
					<div id="cars" style="min-width:700px;height:400px"></div>
				</td>
			</tr>
			<tr>
				<th colspan="2">行驶里程</th>
			</tr>
			<tr>
				<td colspan="2">
					<div id="miles" style="min-width:700px;height:400px"></div>
				</td>
			</tr>
			<tr>
				<th colspan="2">车辆租用订单 </th>
			</tr>
			<tr>
				<td colspan="2">
					<div id="orders" style="min-width:700px;height:400px"></div>
				</td>
			</tr>
		</tbody>
	</table>
</div>
<footer class="footer mt-20">
	<div class="container">
		<p>Copyright &copy;2017-2020 EParkAdmin v1.0 All Rights Reserved.</p>
	</div>
</footer>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
	$(function () {
		$('#cars').highcharts({
			chart: {
				type: 'column'
			},
			title: {
				text: '活跃车辆',
			},
			subtitle: {
				text: '数据来源: 宝鸡高新区公共车辆租赁平台'
			},
			xAxis: {
				categories: [
					'今日',
					'昨日',
					'本周',
					'本月',
					'本季度',
					'本年'
				]
			},
			yAxis: {
				min: 0,
				title: {
					text: '单位：辆'
				}
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
						'<td style="padding:0"><b>{point.y:.1f} 辆</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '活跃车辆',
				colorByPoint: true,
				data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0]
			}]
		});
		$('#miles').highcharts({
			chart: {
				type: 'column'
			},
			title: {
				text: '行驶里程',
			},
			subtitle: {
				text: '数据来源: 宝鸡高新区公共车辆租赁平台'
			},
			xAxis: {
				categories: [
					'今日',
					'昨日',
					'本周',
					'本月',
					'本季度',
					'本年'
				]
			},
			yAxis: {
				min: 0,
				title: {
					text: '单位：公里'
				}
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
						'<td style="padding:0"><b>{point.y:.1f} 辆</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '行驶里程',
				colorByPoint: true,
				data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0]
			}]
		});
		$('#orders').highcharts({
			chart: {
				type: 'column'
			},
			title: {
				text: '租用订单',
			},
			subtitle: {
				text: '数据来源: 宝鸡高新区公共车辆租赁平台'
			},
			xAxis: {
				categories: [
					'今日',
					'昨日',
					'本周',
					'本月',
					'本季度',
					'本年'
				]
			},
			yAxis: {
				min: 0,
				title: {
					text: '单位：单'
				}
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
						'<td style="padding:0"><b>{point.y:.1f} 辆</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '租用订单',
				colorByPoint: true,
				data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0]
			}]
		});
	});
</script>
</body>
</html>
